<template>
	<view class="leave_body" style="padding-bottom:60rpx;">
		<view class="leaveapply_box">
			<view class="leave_title">
				请假人基本信息
			</view>
			<view class="leave_row">
				<span class='leave_row_left'>学生姓名</span>
				<span class='leave_row_right'>{{name}}</span>
			</view>
			<view class="leave_row">
				<span class='leave_row_left'>学生学号</span>
				<span class='leave_row_right'>{{id}}</span>
			</view>
			<view class="leave_row">
				<span class='leave_row_left'>学生班级</span>
				<span class='leave_row_right'>{{classname}}</span>
			</view>
		</view>
		<view class="leaveapply_box">
			<view class="leave_title">
				请假时间
			</view>
			<view class="timerow">
				<view class='timerow_title'>开始时间</view>
				<view class='timerow_date'>
					<uni-datetime-picker  :hide-second="hidesecond" type="datetime"  v-model="formData.startTime"  name='startTime'   placeholder="选择开始时间" @change="bindTimeStart" />
				</view>
			</view>
			<view class="timerow">
				<view class='timerow_title'>结束时间</view>
				<view class='timerow_date'>
					<uni-datetime-picker :hide-second="hidesecond" type="datetime"  v-model="formData.endTime" name='endTime'       placeholder="选择结束时间"  @change="bindTimeEnd"  />
				</view>
			</view>
			<view class="leave_row">
				<span class='leave_row_left'>时长</span>
				<span class='leave_row_right'>{{numtime}} 小时</span>
			</view>
		</view>
		<view class="leaveapply_box2">
			<view class="leave_title">
				请假理由
			</view>
				<textarea v-model="explain"  placeholder="输入请假理由"></textarea>
		</view>
		<view class="leaveapply_box2">
			<view class="leave_title">
				外出路线描述
			</view>
			<textarea v-model="course" placeholder="输入请假外出路线"></textarea>
		</view>
		<view class="leaveapply_box2">
			<view class="leave_title">
				添加图片
			</view>
			<view>
				<button @click="chooseimage" type="default" style="width: 360rpx;">点击上传</button>
				<image :src="image" mode="widthFix" v-if="image!=''"></image>
			</view>
		</view>
		<view class="leaveapply_box2">
			<view class="leave_title">
				请假审批
			</view>
			<view class="zhengwen1">
				<text class="pad_be">审批人:{{teacher}}</text>
				<text class="pad_be">{{sj}}</text>
			</view>
			<button style="margin: 20rpx auto;width: 360rpx;" class="common-btn" @click="submit" type="default">提交</button>
		</view>
		
		

	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				id: '',
				sno:'',
				name: '',
				classname: '',
				startdate: '2022-09-01',
				starttime: '08:00',
				enddate: '2022-09-03',
				endtime: '24:00',
				numtime: '',
				explain: '',
				course: '',
				teacher:'',
				sj:'',
				imgurl: '../../static/dImg.jpg',
				imgshow: false,
				srcArr:[],
				image:'', //显示的图片，带路径
				imgpath:'',//传递给后端的图片路径，保存到数据库中
				formData: {
					startTime:'',
					endTime: ''
				},
				single: "2021-04-3",
				hidesecond:true, //解决隐藏秒，报错的问题
				
			}
		},
		methods: {

			open() {
				this.imgshow = true;
			},
			close() {
				this.imgshow = false;
			},
			chooseimage() {
				/* uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.srcArr = res.tempFilePaths; 
					}
				}); */
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: (res) => {
						
						const imgPaths  = res.tempFilePaths;
						console.log(imgPaths);
						uni.uploadFile({
									url:this.baseUrl+ '/fileUpload/uploadImg', //仅为示例，非真实的接口地址
									// url:this.baseUrl+ '/leave/uploadFiles', //仅为示例，非真实的接口地址
									filePath: imgPaths[0],
									name: 'files', 
									fileType: "image",
									/* formData:{
										"id":11    //此处可以把id传给后端
									}, */
									success: (resData) => {
										console.log(resData);
									  const obj=  JSON.parse(resData.data)										
										if(resData.statusCode==200){
											this.image = this.baseUrl+'/upload/'+obj.image;
											this.imgpath = obj.image;
											uni.showToast({
												title: '上传成功',
												duration: 1000
											});
										}
											
									}
							});
					}
				});
			},
			submit(){
				
				// var formData = new FormData();
				var reason=this.explain;
				if(reason==''){
					setTimeout(() => {
						  uni.showToast({
							title: ' 请假理由不能为空! ',
							icon:'none',
							mask: true,
						  });
						  setTimeout(() => {	               
						  }, 1000)
						}, 0); 
					return;
				}
				var description=this.course;
				var start=new Date(this.timeStart);
				var end=new Date(this.timeEnd);		
				// 非空限制
				if(!this.timeStart){
					setTimeout(() => {
						  uni.showToast({
							title: ' 请假开始时间不能为空! ',
							icon:'none',
							mask: true,
						  });
						  setTimeout(() => {	               
						  }, 1000)
						}, 0); 
					return;
				}
				if(!this.timeEnd){
					setTimeout(() => {
						  uni.showToast({
							title: ' 请假结束时间不能为空! ',
							icon:'none',
							mask: true,
						  });
						  setTimeout(() => {	               
						  }, 1000)
						}, 0); 
					return;
				}
				if(description==''){
					setTimeout(() => {
						  uni.showToast({
							title: ' 外出路线不能为空! ',
							icon:'none',
							mask: true,
						  });
						  setTimeout(() => {	               
						  }, 1000)
						}, 0); 
					return;
				}
				var form = JSON.stringify({
					"reason": reason,
					"description": description,
					"start":this.timeStart,
					"end":this.timeEnd,
					"imgpath":this.imgpath
				});	
				uni.request({
				   // url:"/api/leave/insertnew",
				   url:this.baseUrl+ "/leave/insertnew?satoken="+uni.getStorageSync('satoken'),
				   method:'POST',
				   data: form,
				   headers: {
				    // "token": localStorage.getItem("token"),
						'content-type': 'application/x-www-form-urlencoded',
				    },
				   success: (res) => {
								setTimeout(() => {
									  uni.showToast({
										title: '提交成功',
									  });
									  setTimeout(() => {
										uni.hideToast();
										//关闭提示后跳转
											uni.reLaunch({
												url:"/pages/TabBar/inquire/inquire"
											})			
											/* uni.switchTab({
												url: '/pages/TabBar/inquire/inquire',
												success: function(e) {
												        var page = getCurrentPages().pop();
												        if (page == undefined || page == null) return;
												        page.onLoad();
												    }
											}); */
									  }, 1000)
									}, 0);                    
				    },
					fail(res){
						uni.showToast({
							title: '提交失败'
							});
					},
				}); 
				
			},
			maskClick(date,date2) {
				console.log(date);
				console.log(date2);
			},
			/*
			 * 本地图片转Base64编码
			 * @remark 微信小程序background-image不支持设置本地图片，支持base64
			 */
			imgToBase64(path) {
				return new Promise((resolve, reject) => {
					uni.getFileSystemManager().readFile({
						filePath: path,
						encoding: 'base64',
						success: (res) => {
							resolve('data:image/jpeg;base64,' + res.data);
						},
						fail: (err) => {
							reject(err);
						}
					})
				})
			},
			// 开始时间  由于小时存的是整数，所以不足一个小时的舍弃，比如请假4个半小时按4个小时计算
			bindTimeStart:function(e){
				this.timeStart = e;
				if(this.timeStart==''){
					setTimeout(() => {
						  uni.showToast({
							icon:'none',
							mask: true,
							title: ' 开始时间不能为空! ',
						  });
						  setTimeout(() => {	               
						  }, 1000)
						}, 0); 
					return;
				}
				var dateBegin = new Date(this.timeStart);
				var dateEnd = new Date(this.timeEnd);				
				var dateDiff = dateEnd.getTime() - dateBegin.getTime();	
				// var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数				
				// var hours = dayDiff*24; //计算出小时数
				var hours = Math.floor(dateDiff / (3600 * 1000));
				if(hours > 0)
					this.numtime=hours;
				if(hours>72){
					this.sj='=>> '+uni.getStorageSync('sj');
				}
			},
			// 结束时间 由于小时存的是整数，所以不足一个小时的舍弃，比如请假4个半小时按4个小时计算
			bindTimeEnd:function(e){
				this.timeEnd = e;
				if(this.timeEnd==''){
					setTimeout(() => {
						  uni.showToast({
							icon:'none',
							mask: true,
							title: ' 结束时间不能为空! ',
						  });
						  setTimeout(() => {	               
						  }, 1000)
						}, 0); 
					return;
				}
				var currenttime = new Date().getTime(); //当前的时间戳
				var dateBegin = new Date(this.timeStart);
				var dateEnd = new Date(this.timeEnd);				
				var dateDiff = dateEnd.getTime() - dateBegin.getTime();	
				// var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数				
				// var hours = dayDiff*24; //计算出小时数
				var hours = Math.floor(dateDiff / (3600 * 1000));
				if(hours > 0)
					this.numtime=hours;
				if(hours>72){
					this.sj='=>> '+uni.getStorageSync('sj');
				}
				
			},

		},
		onLoad(options) {
			let that=this;
			// 提交数据请求接口
			uni.request({
				url:this.baseUrl+ "/leave/getUserInfo?satoken="+uni.getStorageSync('satoken'),
				method:'GET',
				withCredentials:true,
				headers: {
				// "token": localStorage.getItem("token")
				 },
				success:(res) => {
					console.log(res.data.result)
					that.id=res.data.result.sno;
					that.name=res.data.result.name;
					that.classname=res.data.result.class_name;
					that.teacher=res.data.result.fdy;
					uni.setStorageSync('sj', res.data.result.sj);
				}
			})
			
		},
		components: {
			// imgHD
		},
	}
	
	
</script>

<style lang="scss" scoped="scoped">
	@import url(@/common/common.css);
	.leave_row{overflow: hidden;margin: 10rpx 10rpx}
	.leave_row_left{float: left;width: 150rpx;}
	.leave_row_right{float: left;}
	.timerow{margin: 10rpx 10rpx;}
	.timerow_title{padding: 15rpx 30rpx;}
	.timerow_date{padding: 15rpx 30rpx;}
	// .uni-date__x-input{height: 50rpx;}
	// .uni-date{display: flex;}
	// .uni-date,.uni-date-editor{display: flex;}
	.pad_be{padding: 10rpx 20rpx;font-size: 32rpx;}
	
</style>
